<script setup>
//发布测试方式
// import { FormRenderer } from '../dist/build.es.js';

//开发测试方式
import { reactive, ref } from 'vue';
import FormRenderer from './components/FormRenderer.vue';

let formData = reactive({
  "controls": [
    {
      "type": "upload",
      "name": "文件上传",
      "key": "B7C0vljoo",
      "id": "upload_B7C0vljoo",
      "lock": false,
      "dataType": "string",
      "props": {
        "width": 12,
        "showLabel": true,
        "labelWidth": null,
        "label": "文件上传",
        "defaultValue": [],
        "buttonText": "点击上传",
        "sizeUnit": "MB",
        "size": 5,
        "required": false,
        "requiredMessage": "必填字段",
        "multiple": false,
        "withCredentials": false,
        "showFileList": true,
        "accept": ".jpeg,.jpg,.png,.json",
        "limit": 2,
        "disabled": false,
        "tip": "请上传文件",
        "customClass": ""
      },
      "rules": [
        {
          "message": "必填字段",
          "required": true
        }
      ]
    },
    {
      "type": "uploadImage",
      "name": "图片上传",
      "key": "d5CodocO2",
      "id": "uploadImage_d5CodocO2",
      "lock": false,
      "dataType": "string",
      "props": {
        "width": 12,
        "showLabel": true,
        "labelWidth": null,
        "label": "图片上传",
        "defaultValue": [],
        "sizeUnit": "MB",
        "size": 5,
        "required": false,
        "requiredMessage": "必填字段",
        "multiple": false,
        "withCredentials": false,
        "showFileList": true,
        "accept": ".jpg,.png",
        "limit": 1,
        "disabled": false,
        "tip": "",
        "customClass": ""
      },
      "rules": [
        {
          "message": "必填字段",
          "required": true
        }
      ]
    },
  ],
  "props": {
    "labelPosition": "right",
    "labelWidth": 100,
    "size": "default",
    "customClass": "",
    "cols": 12
  },
});
let formModel = reactive({
  upload_B7C0vljoo: [],
  uploadImage_d5CodocO2: [],
});

let uploadOptions = {
  action: 'http://localhost:8888/api/Common/UploadFile',
  getHeaders: function () {
    return { 'token': '123456' };
  },
  getFileHook: function (res) {
    if (res.success) {
      return {
        name: res.result.url.substr(res.result.url.lastIndexOf('/') + 1),
        url: res.result.url
      };
    } else {
      return res.msg;
    }
  }
}
let formRenderer = ref(null);
function onSubmit(values) {
  console.log("values", values);
}
</script>

<template>
  <FormRenderer
    ref="formRenderer"
    @submit="onSubmit"
    :uploadOptions="uploadOptions"
    :formData="formData"
    :formModel="formModel"
  />

  <van-button round block type="primary" @click="formRenderer.submit()">提交</van-button>
</template>

